<template>
  <div class="user-container">
    <h1>用户管理</h1>
    <div class="user-content">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="ID" width="80"></el-table-column>
        <el-table-column prop="name" label="用户名" width="120"></el-table-column>
        <el-table-column prop="email" label="邮箱"></el-table-column>
        <el-table-column prop="role" label="角色"></el-table-column>
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status === '启用' ? 'success' : 'danger'">
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  name: 'User',
  data() {
    return {
      tableData: [
        {
          id: 1,
          name: 'admin',
          email: 'admin@example.com',
          role: '管理员',
          status: '启用'
        },
        {
          id: 2,
          name: 'user1',
          email: 'user1@example.com',
          role: '普通用户',
          status: '启用'
        },
        {
          id: 3,
          name: 'user2',
          email: 'user2@example.com',
          role: '普通用户',
          status: '禁用'
        }
      ]
    };
  },
  methods: {
    handleEdit(row) {
      this.$message.success(`编辑用户: ${row.name}`);
    },
    handleDelete(row) {
      this.$confirm('确认删除该用户?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message.success(`删除用户: ${row.name}`);
      }).catch(() => {
        this.$message.info('已取消删除');
      });
    }
  }
};
</script>

<style scoped>
.user-container {
  padding: 20px;
  text-align: left;
}

.user-content {
  margin-top: 20px;
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

h1 {
  font-size: 24px;
  color: #303133;
  margin-bottom: 20px;
}
</style>